import React, { PureComponent } from "react";
import { Form, Input, Button } from "antd";
import { connect } from "react-redux";
import queryString from "query-string";
import { push, goBack } from "react-router-redux";
import backMailbox from "../../assets/images/backMailbox.png";
import { emailReset } from "../../services/api/user";
import style from "../ForgetEmail/style.less";
import ErrTip from "../ErrTip";
import { errCode } from "../../helper/errCode";
const FormItem = Form.Item;

class EmailPsd extends PureComponent {
  handleSubmit = e => {
    e.preventDefault();
    const { code } = queryString.parse(window.location.search);
    this.props.form.validateFields((err, values) => {
      if (err) return;
      emailReset({
        ...values,
        code,
        method: "email",
        field: "email",
        return_type: "sync_json",
        appid: 1
      }).then(data => {
        const response = data.data;
        const flag = String(response.flag);
        if (flag !== "0") {
          console.log(flag, errCode[flag]);
          this.props.form.setFields({
            confirm: {
              value: values.password,
              errors: [new Error(errCode[flag])]
            }
          });
        } else {
          window.location.href = "http://my.veryeast.cn";
        }
      });
    });
  };

  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue("password")) {
      callback(<ErrTip>两次输入的密码不一致</ErrTip>);
    } else {
      callback();
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className={style.EmailBox}>
        <Form className={style.email_form} onSubmit={this.handleSubmit}>
          <FormItem>
            <div className={style.formItem}>
              {getFieldDecorator("password", {
                rules: [
                  {
                    pattern: /^[a-zA-Z0-9]{6,20}$/,
                    message: <ErrTip>请输入正确的密码</ErrTip>
                  },
                  {
                    required: true,
                    message: <ErrTip>请输入6-20位字母或数字的密码</ErrTip>
                  }
                ]
              })(
                <div className={style.EmailWrap}>
                  <Input
                    className={`${style.formInput} ${style.email}`}
                    placeholder="请输入新密码"
                    type="password"
                  />
                </div>
              )}
            </div>
          </FormItem>
          <FormItem>
            <div className={style.formItem}>
              {getFieldDecorator("confirm", {
                rules: [
                  {
                    required: true,
                    message: <ErrTip>请输入6-20位字母或数字的密码</ErrTip>
                  },
                  {
                    validator: this.compareToFirstPassword
                  }
                ]
              })(
                <div className={style.codeWrap}>
                  <Input
                    className={`${style.formInput} ${style.code}`}
                    placeholder="请重复新密码"
                    type="password"
                  />
                </div>
              )}
            </div>
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              htmlType="submit"
              className={style.mobile_form_button}
            >
              下一步
            </Button>
          </FormItem>
        </Form>
        <div className={style.Moreoperations}>
          <a
            onClick={() => this.props.navigateTo("/login")}
            className={style.backLogin}
          >
            返回登录
          </a>
          <span className={style.vertical}>|</span>

          <a
            onClick={() => this.props.navigateTo("/forgetPassword")}
            className={style.backLogin}
          >
            通过手机找回
            <img src={backMailbox} alt="" className={style.backMailbox} />
          </a>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state, ownProps) => {
  return {};
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    navigateTo: location => {
      dispatch(push(location));
    },
    goBack: () => {
      dispatch(goBack());
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Form.create({})(EmailPsd));
